<!--
 * @Author: bigflower
 * @Date: 2022-04-07 15:18:14
 * @LastEditors: csh
 * @LastEditTime: 2022-08-10
 * @Description: file content
 * @FilePath: /wochat-vue3-ts-pinia/src/views/chats/ChatContacts.vue
-->
<template>
  <div class="scrollviewer infinite-list-wrapper">
    <div
      v-for="contact in contacts"
      :key="contact.id"
      tabindex="0"
      :class="selectedId === contact.id ? 'item-select' : 'item'"
      @click="chatItemClick(contact)"
    >
      <el-badge
        is-dot
        class="item-avator"
        :value="contact.unread"
        :hidden="contact.unread === 0"
      >
        <img :src="contact.avatorUrl" />
      </el-badge>
      <div class="item-main">
        <div class="item-main-top">{{ contact.name }}</div>
        <div class="item-main-bottom">{{ contact.lastMsg }}</div>
      </div>
      <div class="item-right">
        <div class="item-right-top"></div>
        <div class="item-right-bottom">{{ contact.lastMsgTime }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRecentContactStore } from '@/store/recent';
import { ref } from 'vue';
import { Contact } from '@/service/entity/Contact';
import { storeToRefs } from 'pinia';

const recentContactStore = useRecentContactStore();
recentContactStore.loadContacts();

const { contacts } = storeToRefs(recentContactStore);
const selectedId = ref('');


const chatItemClick = (item: Contact) => {
  selectedId.value = item.id;
  console.log(item.name);
  // TODO 向上抛出事件
  // this.$emit('itemClick', item);
  setMessageRead(item);
  recentContactStore.changeCurrentContact(item.id);
};
const setMessageRead = (item: Contact) => {
  // 通知数据中心
  // 更新界面
  item.unread = 0;
};
</script>

<style lang="less" scoped>
.scrollviewer {
  width: 270px;
  overflow: hidden;
}
.scrollviewer:hover {
  overflow: auto;
}
.item {
  width: 246px;
  padding: 12px;
  display: flex;
  align-items: center;
  background: rgb(235, 233, 232);

  .item-avator {
    width: 40px;
    height: 40px;
    border-radius: 3px;

    img {
      width: 40px;
      height: 40px;
    }
  }

  .item-main {
    overflow: hidden;
    flex: 1;
    margin-left: 10px;
    margin-right: 10px;

    .item-main-top {
      font-weight: 600;
    }

    .item-main-bottom {
      margin-top: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: black;
    }
  }

  .item-right {
    display: flex;
    flex-direction: column;

    .item-right-top {
      flex: 1;
      min-height: 20px;
    }
    .item-right-bottom {
      flex: 1;
      white-space: nowrap;
      margin-top: 6px;
    }
  }
  &:hover {
    background: rgb(219, 217, 216);
  }
}
.item-select {
  .item();
  background: rgb(197, 196, 196);
  border: 0px solid transparent;
}
</style>
